<template>
  <div id="LetterList">
    <div class="msg_list">
      <!-- 左部头像 -->
      <div class="img_box">
        <img class="card_body_left_img"/>
      </div>
      <!-- 好友名称 -->
      <div class="name_box">
        <div class="name_text">我发给{{list.nickname}}:</div>
      </div>
      <!-- 消息内容 -->
      <div class="msg_content">
        <div class="content_text">{{list.content}}</div>
      </div>
      <!-- 时间 -->
      <div class="time_box">
        <div class="time_text">{{list.time}}</div>
      </div>
      <!--{{list}}-->
      <!-- 右边内容区域 -->
      <div class="view_box">
        <div class="del">
          <!-- 删除 -->
          <Button type="text" @click="modal1 = true" class="deltext">删除</Button>
          <!--<Button type="primary" @click="del(viewlist.id)">删除</Button>-->
          <Modal
            v-model="modal1"
            title="删除私信"
            @on-ok="del"
            @on-cancel="cancel">
            <p>你确定要删除这封私信吗？</p>
          </Modal>
        </div>
        <div class="jubao"></div>
        <div class="backto">
          <!-- Form -->
          <el-button type="text" @click="dialogFormVisible = true">回复</el-button>

          <el-dialog title="发送私信" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <p>发给:{{list.nickname}}</p>
              <el-form-item label="内容:" :label-width="formLabelWidth">
                <el-input v-model="inputReply" autocomplete="off" placeholder=""></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="replay">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <div class="view">
          <router-link :to="'/letter/letterview/'+list.fromID+'/'+list.nickname" class="link">查看对话</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LetterList',
    inject: ['reload'],
    components: {
    },
    data () {
      return {
        modal1: false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          content: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '50px',
        inputReply: ''
      }
    },
    props: ['list'],
    computed: {
    },
    created () {
      console.log(this.list)
      this.getLetterData()
    },
    methods: {
      open () {
        this.$alert('你确定要删除所有会话吗？', '删除私信会话', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            })
          }
        })
      },
      ok () {
        this.$Message.info('Clicked ok')
      },
      cancel () {
        this.$Message.info('Clicked cancel')
      },
      del () {
        if (this.id === null) {
          this.$Message.error('删除失败!')
        } else {
          this.axios.get('/api/delectLetter/', {
            params: {
              id: this.list.id
            }
          }).then((response) => {
            if (response.data.code === 200) {
              this.$Message.success('删除成功!')
              this.viewList.splice(this.id, 1)
              this.reload()
            } else {
              this.$Message.error('删除失败!')
            }
          })
            .catch((error) => {
              this.$Notice.error({
                title: '通知',
                desc: '接口，异常！'
              })
              console.info(error)
            })
        }
      },
      replay () {
        this.dialogFormVisible = false
        // 数据判断为空
        if (this.inputReply.length === 0) {
          this.$Message.error('回复不可为空!')
        } else {
          // 写回复
          this.axios.get('/api/addLetter', {
            params: {
              phone: sessionStorage.getItem('phone'),
              // fromid: this.viewList.uid,
              fromid: this.list.fromID,
              content: this.inputReply
            }
          })
            .then((response) => {
              if (response.data.code === 200) {
                this.$Message.success('回复成功!')
                // this.list.push(this.list)
                this.getLetterData()
              } else {
                this.$Message.error('回复失败!')
              }
            })
            .catch((error) => {
              this.$Notice.error({
                title: '通知',
                desc: '接口，异常！'
              })
              console.info(error)
            })
        }
      },
      getLetterData () {
        this.axios.get('/api/findNearLetter', {
          params: {
            phone: sessionStorage.getItem('phone')
          }
        })
          .then(res => {
            this.testList = res.data.data
          })
      }
    }
  }
</script>

<style scoped>
  @import '../../../../../static/css/letter/LetterList.css';
</style>
